<template>
    <div class="card" :class="'card_' + animation" @touchstart="selectCard" @mousedown="selectCard">
        <div v-if="back" class="back" :class="back">

        </div>
        <template v-else>
            <div class="face" :class="card.option.color">
                <div class="number">{{card.option.value}}</div>
                <i class="icon fa fa-fw" :class="card.option.icon" />
            </div>
            <div class="content">
                
            </div>
            <div class="face tair" :class="card.option.color">
                <div class="number">{{card.option.number}}</div>
                <div class="icon">{{card.option.suit}}</div>
            </div>
        </template>
    </div>
</template>
<script>
    export default {
        props: {
            card: Object,
            animation: String,
            back: {
                value: false,
                type: Boolean
            }
        },
        methods: {
            selectCard() {
                this.$emit('select');
            }
        }
    }
</script>
<style lang="less" scoped>
    
    @keyframes card_add {
        0% { margin-top: -6rem; opacity: 0; }
        50% { margin-top: -6rem; opacity: 1; }
        100% { margin-top: 0; opacity: 1; }
    }
    .card_add {
        animation: card_add ease-out 0.4s;
        animation-fill-mode: none;
    }
    
    @keyframes card_use {
        0% { opacity: 1; }
        80% { opacity: 1; }
        100% { opacity: 0; }
    }
    .card_use {
        animation: card_use ease-out 3s;
        animation-fill-mode: none;
    }

    @keyframes card_first {
        0% { transform: scaleX(0) scaleY(0.5); }
        100% { transform: scaleX(1) scaleY(1); }
    }
    .card_first {
        animation: card_first ease-out 0.4s;
        animation-fill-mode: none;
    }

    @keyframes card_remove {
        0% { transform: translateX(0); }
        100% { transform: translateX(75vw); }
    }
    .card_remove {
        animation: card_remove ease-in 2s;
        animation-fill-mode: none;
    }

    .card {
        width: 6rem;
        height: 9rem;
        border: 1px solid #CCCCCC;
        border-radius: 0.25rem;
        background: #FFFFFF;
        transform-origin: 50% 100%;
        transition: all ease-in-out 0.4s;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        box-shadow: #66666633 0 0 0.5rem;

        .back {
            width: 5rem;
            height: 8rem;
            background-color: #aaaaaa;
            border-radius: 0.2rem;
            &.red {
                background-color: red;
            }
            &.blue {
                background-color: blue;
            }
        }
        .face {
            width: 1rem;
            height: 100%;
            flex: none;
            display: flex;
            flex-direction: column;
            &.black {
                color: black;
            }
            &.red {
                color: red;
            }
            .icon {
                font-size: 0.777777rem;
            }
        }
        .content {
            flex: 1;
            height: 100%;
            padding: 1rem 0;
        }
        .tair {
            transform-origin: 50% 50%;
            transform: rotate(180deg);
            .icon {
                font-size: 1rem;
            }
        }
    }
</style>